/**
 * Created by FreezeSoul on 2017/8/18.
 */
define([
    "app/core/base",
    "app/core/util",
    "../commonMeta",
    "jquery",
    "underscore",
    'JSONParse',
    'loglevel',
    'jquerySkywheel'
], function (Chart, Util, Meta, $, _, JSON, log) {

    var property = {
        config: "property",
        option: [
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_I',
                name: '图片资源I',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_I',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_II',
                name: '图片资源II',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_II',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_III',
                name: '图片资源III',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_III',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_IV',
                name: '图片资源IV',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_IV',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_V',
                name: '图片资源V',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_V',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_VI',
                name: '图片资源VI',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VI',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_VII',
                name: '图片资源VII',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VII',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_VIII',
                name: '图片资源VIII',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VIII',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_IX',
                name: '图片资源IX',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_IX',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_X',
                name: '图片资源X',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_X',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_WIDTH',
                name: '图片宽度',
                enable: false,
                type: 'number',
                value: 400,
                default: 400,
                link: 'width',
                tooltip: '图片宽度'
            },
            {
                group: '基础',
                id: 'J_IMAGE_HEIGHT',
                name: '图片高度',
                enable: false,
                type: 'number',
                value: 200,
                default: 200,
                link: 'height',
                tooltip: '图片高度'
            },
            {
                group: '基础',
                id: 'J_IMAGE_TYPE',
                name: '滚动方向',
                enable: false,
                type: 'select',
                value: 1,
                default: 1,
                data: [{
                    value: 1,
                    text: 'vertical'
                }, {
                    value: 2,
                    text: 'horizontal'
                }],
                link: 'effect',
                tooltip: '图片滚动方向'
            },
            {
                group: '基础',
                id: 'J_IMAGE_BORDER',
                name: '图片边框',
                enable: false,
                type: 'checked',
                value: false,
                default: false,
                link: 'imageBorder',
                tooltip: '是否显示图片边框'
            },
            {
                group: '基础',
                id: 'J_IMAGE_BORDER_COLOR',
                name: '边框颜色',
                enable: false,
                type: 'color',
                value: '#C1C1C1',
                default: '#C1C1C1',
                link: 'borderColor',
                tooltip: '图片边框颜色'
            },
            {
                group: '事件',
                id: 'ImageClickJsEval',
                name: '点击执行脚本',
                enable: false,
                type: 'script',
                value: '',
                default: '',
                link: 'clickScript',
                tooltip: '点击执行脚本，可定制复杂的JS操作'
            }
        ].concat($.extend(true, [], Meta.commonProperties)),
        MapOption: function (option) {
            Util.linkOption(this.option, option);
        }
    };

    var coverflow = Chart.extend({
        constructor: function (layout) {
            this._layout = layout;
            this._element = null;
            this._container = null;
            this._coverflowId = 'coverflow_' + Util.newUUID();
            this._currentIndex = null;
            this._option = {
                Binding: [],
                Events: [],
                Extend: $.extend(true, {}, property),
                Option: {
                    uuid: '',
                    class: '',
                    display: true,
                    imageUrl_I: "",
                    imageUrl_II: "",
                    imageUrl_III: "",
                    imageUrl_IV: "",
                    imageUrl_V: "",
                    imageUrl_VI: "",
                    imageUrl_VII: "",
                    imageUrl_VIII: "",
                    imageUrl_IX: "",
                    imageUrl_X: "",
                    width: 400,
                    height: 200,
                    effect: 1,
                    imageBorder: false,
                    borderColor: "#C1C1C1",
                    clickScript: '',
                    initScript: '',
                    disposeScript: ''
                }
            };
        },

        init: function (element) {
            try {
                this._container = element;
            } catch (e) {
                log.error(e);
            }
        },
        _render: function () {
            $(this._container).empty();
            var _this = this;
            var htmlStr = '<ul id="' + this._coverflowId + '">';
            var rootPath = "static/resource/";
            var imagePathArry = [
                this._option.Option.imageUrl_I,
                this._option.Option.imageUrl_II,
                this._option.Option.imageUrl_III,
                this._option.Option.imageUrl_IV,
                this._option.Option.imageUrl_V,
                this._option.Option.imageUrl_VI,
                this._option.Option.imageUrl_VII,
                this._option.Option.imageUrl_VIII,
                this._option.Option.imageUrl_IX,
                this._option.Option.imageUrl_X
            ];
            var styleStr = this._option.Option.imageBorder ? ('style="background: black; border: 4px solid ' + this._option.Option.borderColor + ';"') : "";
            var lastLiIndex = "li_1";
            $.each(imagePathArry, function (i, path) {
                if (path) {
                    var imageUrl = adConfig.baseServiceUrl + rootPath + path;
                    lastLiIndex = 'li_' + (i + 1);
                    htmlStr += '<li class="li_' + (i + 1) + '">' +
                        '<img class="coverflow_img" data-index="' + (i + 1) +
                        '" src="' + imageUrl + '" ' + styleStr +
                        'width="' + _this._option.Option.width + 'px" ' +
                        'height="' + _this._option.Option.height + 'px"/></li>';
                }
            });
            htmlStr += '</ul>';
            var $element = $(htmlStr);
            $element.appendTo($(this._container));

            $("#" + this._coverflowId).skywheel({
                type: "normal",
                effect: this._option.Option.effect,
                width: this._option.Option.width + "px",
                height: this._option.Option.height + "px",
                keyOption: "nokey"
            });
            setTimeout(function () {
                $("#" + _this._coverflowId).find(".li_1").trigger("click");
            }, 2000);
            $element.css({
                "margin-top": ((this._option.Option.effect === 1) ? this._option.Option.height : 200) + "px",
                "margin-left": ((this._option.Option.effect === 1) ? 200 : this._option.Option.width) + "px"
            });
            $("#" + this._coverflowId).find("li").css({
                "background-color": "transparent"
            });
            $element.find("img.coverflow_img").on("click", function (e) {
                _this._currentIndex = $(this).data("index");
                if (_this._option.Option
                    && _this._option.Option.clickScript) {
                    Util.evalJavaScript(_this, _this._option.Option.clickScript);
                }
            });
            this._fixEditorOverflow($element);
            //Util.setCommonMeta(this, this._container, this._option.Option);
            //Util.initChartLifeTime(this, this._container, this._option.Option);
            return $element;
        },
        _fixEditorOverflow: function (obj) {
            if (this.__isEditMode) {
                $(".chart-render-container").hover(function () {
                    $(obj).show();
                }, function () {
                    $(obj).hide();
                })
            }
        },
        example: function () {
            try {
                this._element = this._render();
            } catch (e) {
                log.error(e);
            }
        },
        _readProperty: function () {
            try {
                if (!this._option.Extend) return;
                Util.deepMapOption(property, this._option.Extend, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        setData: function (data) {
            try {
                this._readProperty();
                this._element = this._render();
            } catch (e) {
                log.error(e);
            }
        },
        setOption: function (option) {
            try {
                return this._option = $.extend(true, {}, option);
            } catch (e) {
                log.error(e);
            }
        },
        getOption: function () {
            return this._option;
        },
        setTheme: function (theme) {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        resize: function () {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        showLoading: function () {
            try {
                if (this._layout && this._layout.showLoading) {
                    this._layout.showLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        hideLoading: function () {
            try {
                if (this._layout && this._layout.hideLoading) {
                    this._layout.hideLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        dispose: function () {
            try {
                $(this._element).remove();
                //Util.disposeChartLifeTime(this, this._container, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        getElement: function () {
            return this._element;
        },
        getChart: function () {
            return this._element;
        }
    });

    return {
        Chart: coverflow,
        Property: property
    };
});


